<template>
  <div id="videolist">
    <div class="title">
      <el-button @click="dotypes('新增')">新增</el-button>
    </div>
    <!--default-expand-all-->
    <el-table
            :data="tableData"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            border
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
              prop="alias"
              label="功能名"
              width="600">
      </el-table-column>
      <el-table-column
              prop="id"
              label="ID"
              width="80">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
                  size="mini"
                  @click="handleType(scope.$index, scope.row, 'bor')">新增同级</el-button>
          <el-button
                  size="mini"
                  @click="handleType(scope.$index, scope.row, 'child')">新增子级</el-button>
          <el-button
                  size="mini"
                  @click="handleType(scope.$index, scope.row, 'update')">编辑</el-button>
          <el-button
                  size="mini"
                  @click="handleType(scope.$index, scope.row, 'del')">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="layer" v-show="seecontent">
      <div class="mask" @click="seecontent = false"></div>
      <div class="content">
        <div class="title">
          {{addtitle}}
        </div>
        <span class="close" @click="seecontent = false"><i class="iconfont icon-untitled94"></i></span>
        <div class="shuru">
          <span>功能名</span>
          <el-input v-model="input.alias" placeholder="请输入功能名"></el-input>
        </div>
        <div class="shuru">
          <span>父级ID</span>
          <el-input v-model="input.parent_id" placeholder="请输入父级ID"></el-input>
        </div>
        <div class="shuru1">
          <span class="title">板块</span>
          <div>
            <div v-for="(item, index) in input.memo" :key="index" class="cont">
              <div>
                <el-input v-model="item.name" placeholder="请输入控制器名" class="k-inp"></el-input><span class="del-class" @click="del('c', index, 0)">删除</span>
                <ul>
                  <li v-for="(itemChild, indexChild) in item.actions" :key="indexChild">
                    <el-input v-model="item.actions[indexChild]" placeholder="请输入方法" class="a-inp"></el-input><span class="del-class" @click="del('a',index ,indexChild)">删除</span>
                  </li>
                </ul>
                <div class="tips" @click="addA(index)">+增加方法</div>
              </div>
            </div>
            <div class="tips" style="margin-top: 10px" @click="addK()">+增加控制器</div>
          </div>
        </div>
        <div class="main-box">
          <span>状态</span>
          <el-radio-group v-model="input.status">
            <el-radio :label="'enabled'">可用</el-radio>
            <el-radio :label="'disabled'">禁用</el-radio>
            <el-radio :label="'hidden'">隐藏</el-radio>
          </el-radio-group>
        </div>
        <div class="main-box" style="text-align: center">
          <span style="margin-left: 50px;"><el-button @click="addTags">确定</el-button></span>
          <span style="margin-left: 50px;"><el-button @click="seecontent = false">取消</el-button></span>
        </div>
      </div>
    </div>
    <el-dialog
            title="新增分类"
            :visible.sync="setIdShow"
            width="60%">
      <div>
        父ID：{{!getmsg.parent_id ? 0 : getmsg.parent_id}}
      </div>
      <div class="mar-top">
        <el-input v-model="setIdAlias" placeholder="请输入分类名"></el-input>
      </div>
      <div class="mar-top">
        <el-radio-group v-model="setIdEnabled">
          <el-radio :label="1">可用</el-radio>
          <el-radio :label="0">不可用</el-radio>
        </el-radio-group>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="setIdShow = false">取 消</el-button>
    <el-button type="primary" @click="setB">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import msgbox from '@/common/msgbox.js'
import MsgList from '../public/msgList'
import editor from '../../assets/editor/content'

export default {
  components: {
    MsgList,
    editor: editor},
  name: 'questions',
  data () {
    return {
      tableData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      btntype: ['修改', '删除'],
      delshow: false,
      seecontent: false,
      addtitle: '',
      input: {
        'parent_id': '',
        'alias': '',
        memo: [
          {
            name: '',
            actions: ['']
          }
        ],
        'status': 'enabled'
      },
      getmsg: {},
      setId: 0,
      setIdShow: false,
      setIdAlias: '',
      setIdEnabled: 1
    }
  },
  watch: {
    seecontent () {
      if (!this.seecontent) {
        this.input = {'enabled': 'enabled'}
      }
    },
    setIdShow () {
      if (!this.setIdShow) {
        this.setId = 0
        this.setIdAlias = ''
      }
    }
  },
  mounted () {
    this.search()
  },
  methods: {
    del (type, num, numChild) {
      console.log(type)
      let that = this
      if (type === 'c') {
        if (this.input.memo.length === 1) {
          this.$message.error('不能删除')
          return false
        }
        this.input.memo.splice(num, 1)
      } else if (type === 'a') {
        if (this.input.memo[num].actions.length === 1) {
          this.$message.error('不能删除')
          return false
        }
        this.input.memo[num].actions.splice(numChild, 1)
      }
    },
    addK () {
      let one = {
        name: '',
        actions: ['']
      }
      this.input.memo.push(one)
    },
    addA (num) {
      this.input.memo[num].actions.push('')
      console.log(num)
    },
    setB () {
      let that = this
      this.$g.ajax({
        path: 'userAcos/add',
        method: 'post',
        data: {
          'parent_id': this.setId,
          'alias': this.setIdAlias,
          'enabled': this.setIdEnabled
        },
        cbSuccess: function (data) {
          that.setIdShow = false
          that.search()
        },
        cbError: function (data) {
          let msg = msgbox.get(data.msg)
          that.$message.error(msg)
        }
      })
    },
    handleType (index, row, action) {
      this.getmsg = row
      if (action === 'del') {
        this.delhot()
      } else if (action === 'bor' || action === 'child') {
        this.addtitle = '新增'
          this.input = {
          'parent_id': '',
            'alias': '',
            memo: [
            {
              name: '',
              actions: ['']
            }
          ],
            'status': 'enabled'
        }
        this.input.parent_id = action === 'bor' ? (row.parent_id === null ? '' : row.parent_id) : row.id
        this.seecontent = true
      } else {
        this.dotypes('修改')
      }
    },
    search () {
      let that = this
      this.$g.ajax({
        path: 'userAcos/getList',
        method: 'get',
        cbSuccess: function (data) {
          that.tableData = data.memo
        },
        cbError: function (data) {
          let msg = msgbox.get(data.msg)
          that.$message.error(msg)
        }
      })
    },
    dotypes (type) {
      this.seecontent = true
      this.addtitle = type
      if (type === '修改') {
        let that = this
        this.$g.ajax({
          path: 'userAcos/getView',
          method: 'post',
          data: {
            id: this.getmsg.id
          },
          cbSuccess: function (data) {
            console.log(data)
            let arr = []
            for (let i in data.memo.memo) {
                let one = {
                  name: i,
                  actions: data.memo.memo[i]
                }
                arr.push(one)
            }
            that.input = {
              'parent_id': data.memo.parent_id,
              'alias': data.memo.alias,
              memo: arr,
              'status': data.memo.status,
            }
          },
          cbError: function (data) {
            let msg = msgbox.get(data.msg)
            that.$message.error(msg)
          }
        })
      } else if (type === '删除') {
        this.seecontent = false
        this.delhot()
      } else if (type === '新增') {
        this.input = {
          'parent_id': '',
          'alias': '',
          memo: [
            {
              name: '',
              actions: ['']
            }
          ],
          'status': 'enabled'
        }
      }
    },
    addTags () {
      let that = this
      let addP = {}
      for (let i in this.input.memo) {
        // let addOne = {
        //   [this.input.memo[i].name]: this.input.memo[i].actions
        // }
        // addP.push(addOne)
        addP[this.input.memo[i].name] = this.input.memo[i].actions
      }
      console.log(this.input)
      console.log(addP)
      if (this.addtitle === '新增') {
        this.$g.ajax({
          path: 'userAcos/add',
          method: 'post',
          data: {
            'parent_id': this.input.parent_id,
            'alias': this.input.alias,
            memo: addP,
            'status': this.input.status,
          },
          cbSuccess: function (data) {
            that.seecontent = false
            that.input = {
              'parent_id': '',
              'alias': '',
              memo: [
                {
                  name: '',
                  actions: ['']
                }
              ],
              'status': 'enabled'
            }
            console.log(that.input)
            that.$forceUpdate()
            that.search()
          },
          cbError: function (data) {
            let msg = msgbox.get(data.msg)
            that.$message.error(msg)
          }
        })
      } else if (this.addtitle === '修改') {
        this.$g.ajax({
          path: 'userAcos/update',
          method: 'post',
          data: {
            'parent_id': this.input.parent_id,
            'alias': this.input.alias,
            memo: addP,
            'status': this.input.status,
            id: this.getmsg.id
          },
          cbSuccess: function (data) {
            that.seecontent = false
            that.input = {
              'parent_id': '',
              'alias': '',
              memo: [
                {
                  name: '',
                  actions: ['']
                }
              ],
              'status': 'enabled'
            }
            that.$forceUpdate()
            that.search()
          },
          cbError: function (data) {
            let msg = msgbox.get(data.msg)
            that.$message.error(msg)
          }
        })
      }
    },
    delhot () {
      let that = this
      this.$confirm('确定删除配置吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$g.ajax({
          path: 'userAcos/delete',
          method: 'post',
          data: {
            'id': that.getmsg.id
          },
          cbSuccess: function (data) {
            that.search()
          },
          cbError: function (data) {
            let msg = msgbox.get(data.msg)
            that.$message.error(msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    getid (vals) {
      this.getmsg = vals.val
      this.dotypes(vals.btn)
    }
  }
}
</script>

<style lang="scss" scoped>
  .active{
    display: inline-block;
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    transform:rotate(180deg);
  }
  #videolist {
    .title{
      margin-bottom: 20px;
    }
    .main-box{
      margin-top: 20px;
      span{
        margin-right: 30px;
        font-size: 14px;
        font-weight: 700;
        color: #606266;
      }
      .el-input {
        width: 240px;
      }
    }
    .main-box {
      .el-radio__inner {
        background: red;
      }
      .el-radio__input.is-checked+.el-radio__label{
        color: #00a4a0!important;
      }
    }
    .layer {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 999;
      .mask {
        background: rgba(153, 153, 153, 0.5);
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 1;
      }
      .content {
        position: relative;
        width: 700px;
        background: #fff;
        margin: 4% auto;
        z-index: 2;
        padding: 30px;
        max-height: 820px;
        overflow: auto;
        .close {
          position: absolute;
          right: 10px;
          top: 10px;
          cursor: pointer;
        }
        .title {
          text-align: center;
          font-size: 18px;
          font-weight: bold;
          margin-bottom: 20px;
        }
        .shuru {
          margin-bottom: 10px;
          span {
            font-size: 14px;
            color: #666;
          }
          .el-input {
            width: 90%;
            margin-left: 20px;
          }
        }
        .shuru1{
          margin-bottom: 10px;
          display: flex;
          .del-class{
            cursor: pointer;
            font-size: 12px;
            color: #cccccc;
            margin-left: 10px;
          }
          .title{
            font-size: 14px;
            color: #666;
            width: 32px;
          }
          .cont{
            margin-left: 38px;
            width: 100%;
          }
          .el-input {
            width: 100%;
          }
          .tips{
            font-size: 13px;
            color: #00a4a0;
            cursor: pointer;
            margin-bottom: 20px;
          }
          .k-inp{
            margin-bottom: 10px;
            width: 400px;
          }
          .a-inp{
            width: 200px;
          }
          li{
            margin-bottom: 6px;
          }
        }
        .el-date-editor.el-input, .el-date-editor.el-input__inner {
          position: relative;
          left: -4px;
        }
        .buttons {
          margin-top: 20px;
          text-align: center;
          button {
            margin: 0 20px;
          }
        }
      }
    }
  }
  .mar-top{
    margin-top: 14px;
  }
</style>
<style scoped>
  .el-button:focus, .el-button:hover{
    color: #00a4a0;
  }
  .el-button:active{
    border-color: #00a0a0;
  }
  .el-button{
    padding: 8px 14px;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background: #00a4a0;
    border-color: #00a4a0;
  }
  .transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
</style>
